import React, { Component } from "react";
import { Icon, Typography } from "antd";
import classes from './TaskSpan.module.css';
const { Text } = Typography;
class TaskSpan extends Component {
  render () {
    let alert_class_name = '';
    const taskIcon = <Icon type="check-circle" onClick={this.props.onClose} className={classes.taskIcon} />;
    const taskDelIcon = <Icon type="delete" onClick={this.props.onClose} className={classes.taskDelIcon} />;
    switch (this.props.type) {
      case "success":
        alert_class_name = 'ant-alert-success';
        break;
      case "info":
        alert_class_name = 'ant-alert-info';
        break;
      case "warning":
        alert_class_name = 'ant-alert-warning';
        break;
      case "error":
        alert_class_name = 'ant-alert-error';
        break;
      default:
        alert_class_name = 'ant-alert-success';
        break;
    }
    return (
      <div className={'ant-alert ant-alert-no-icon ' + alert_class_name + ' ' + classes.taskLine}>
        {this.props.type === 'info' ? <Text >{this.props.taskName}</Text> : <Text delete>{this.props.taskName}</Text>}

        {this.props.type === 'info' ? taskIcon : taskDelIcon}
      </div>
    );
  }
}
export default TaskSpan;